<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
</head>
<body>
<div class="box">
    <div class="box-header">
        <h3 class="box-title">请输入用户名进行查询</h3>
    </div>
    <input type="text" class="form-control" name="username" id="userName" placeholder="UserName"
           style="width:20%;display: inline;">
    <div onclick="selectByUsername()"
         style="width:15%;display: inline;border: 1px solid #000000;padding: 6px;height: 32px;">查询
    </div>

    <div class="box-body">
        <table id="example2" class="table table-bordered table-hover">
            <thead>
            <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>密码</th>
                <th>性别</th>
            </tr>
            </thead>
            <tbody id="tb">
            <tr th:each="user:${user}">
                <td th:text="${user.id}"></td>
                <td th:text="${user.userName}"></td>
                <td th:text="${user.password}"></td>
                <td th:text="${user.sex}"></td>
                <td>
                    <div class="update"><a th:href="@{'/user/updateUser?id='+${user.id}}">更改</a></div>
                    <div class="delete"><a th:href="@{'/user/deleteUser?id='+${user.id}}">删除</a>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <script>

        function selectByUsername() {
            var areahtml = "";
            $.ajax({
                type : 'get',
                url: "/user/selectByUsername",
                data: {userName: $("#userName").val()},
                success: function (result) {
                    for (var i = 0; i < result.length; i++) {
                        areahtml = areahtml
                            + '<tr>'
                            + '<td>' + result[i].id + '</td>'
                            + '<td>' + result[i].userName + '</td>'
                            + '<td>' + result[i].password + '</td>'
                            + '<td>' + result[i].sex + '</td>'
                            + '<td>'
                            + '</tr>'
                    }
                    $("#tb").html(areahtml);
                },
                error: function (result) {
                    alert("查询失败");
                }
            })
        }
    </script>

</div>
</body>
</html>